<template>
  <div class="item-container">
    <div v-if="props.showTime">
      <div  class="tips">

        <span>{{systemStore.formatTimestamp(+message.createTime)}}</span>
      </div>
    </div>
    <div class="user-message owner" v-if="message.type === 1">
      <pop :message="message.content" :type="message.type"></pop>
      <avatar style="margin-left: 15px;" :avatar="userStore.avatar"></avatar>
    </div>
    <div class="user-message" v-else-if="message.type === 2">
      <avatar style="margin-right: 15px;" :avatar="chatStore.currentChat.lastAvatar"></avatar>
      <pop :message="message.content" :type="message.type"></pop>
    </div>
    <div v-if="message.type === 4">
      <span class="tips">你撤回了一条消息</span>
    </div>
    <div v-else-if="message.type === 5">
      <span class="tips pai-pai">
        {{message.message}}
      </span>
    </div>
  </div>
</template>

<script setup>
import avatar from '@/components/chat/chatAvatar/index.vue'
import pop from '@/components/chat/pop/index.vue'
import { useChatStore } from '../../../../stores/chat'
import { useUserStore } from '../../../../stores/user'
import { useSystemStore } from '../../../../stores/system'

const systemStore = useSystemStore()
const userStore = useUserStore()
const chatStore = useChatStore()
const props = defineProps(['message' , 'showTime'])
const message = props.message

/**
 * type 1-自己 2-他人 3-时间 4-撤回消息提醒 5-拍一拍
 */

</script>


<style scoped lang="less">
.item-container {
  width: 100%;
  cursor: default;


  .tips {
    width: 100%;
    display: flex;
    justify-content: center;
    color: rgb(174, 174, 174);
    font-size: 12px;
    padding: 10px 0;
    user-select: none;
  }
  .pai-pai {
    font-weight: bolder;
    //font-size: 13px;
  }

  .user-message {
    display: flex;
    align-items: center;
    padding: 10px 0;
  }

  .owner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}




</style>
